<template>
  <div>
    <ClientOnly>
      <mavon-editor style="z-index: auto;" ref="md" @imgAdd="$imgAdd" @imgDel="$imgDel" :toolbars=mavonEditor.toolbars :editable="true" @save="commit" v-model="mavonEditor.article.content" :scrollStyle="false" :subfield="false" defaultOpen="preview" />
    </ClientOnly>
  </div>
</template>
<script>
import $ from "jquery";
import {
  baseURL,
  get,
  save,
  associate,
  getAndAssociate,
  remove,
  update,
  axios
} from "service/api";
export default {
  name: "MarkdownEditor",
  data() {
    return {
      mavonEditor: {
        article: {
          content: ""
        },
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: false, // 上角标
          subscript: false, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: false, // 全屏编辑
          readmodel: false, // 沉浸式阅读
          htmlcode: false, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: false, // 单双栏模式
          preview: true, // 预览,
          editable: true
        }
      }
    };
  },
  mounted() {
    let self = this;
    get("articles/5b9231a8b5987023bd0313c3")
      .then(response => {
        if (response.status == "200") {
          self.mavonEditor.article.content = response.data.content;
          this.$nextTick(() => {
            // $vm.$imgUpdateByUrl 详情见本页末尾
            $vm.$imgUpdateByUrl(0, base64内容);
          });
        }
        console.log(response);
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    commit: async function() {
      this.$emit("commit");
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 缓存图片信息
      this.img_file[pos] = $file;
    },
    $imgDel(pos) {
      delete this.img_file[pos];
    },
    $imgAdd(pos, $file) {
      let self = this;
      // 将图片上传到服务器.
      var formdata = new FormData();
      formdata.append("file", $file);
      console.log($file);
      axios({
        url: "http://192.168.0.114:8080/upload",
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" }
      }).then(response => {
        console.log("发送成功");
        if (response.status == 200) {
          self.$refs.md.$img2Url(pos, response.data.fileDownloadUri);
        }
      });
    }
  }
};
</script>
<style lang="scss">
.content:not(.custom) {
  max-width: none;
}
</style>